<template>
    <div class="myheader">
        <div class="left">
            <div class="logo"><router-link :to="{path:'/'}"><img src="../images/common/logo_white.png"></router-link></div>
            <div class="nav">
                <ul>
                    <li><router-link :to="{path:'/'}">首页</router-link></li>
                    <li><router-link :to="{path:'/list'}">我的简历</router-link></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
            </div>
        </div>

        <div class="right">
            <a href="/webcv/page/preview" target="_blank">简历模板</a>
            <div class="exit" type="primary" @click="logout">退出 <i class="iconfont jl_icon-arrowright1"></i></div>
        </div>
    </div>
</template>

<script>
    import {logout} from 'api'
    export default {
        name: "myheader",
        data(){
            return{

            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            logout(){
                this.$promise.post(logout).then(resp=>{
                    console.log(resp);
                    if(resp.status==1){
                        Cookies.remove(SESSION_KEY, { domain: SESSION_VALUE });
                        this.$router.replace({path:"login"})
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.myheader{
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    color: #fff;
    .left{
        display: flex;
        .logo{
            height: 30px;
            margin-top: 10px;
            img{
                height: 100%;
                width: auto;
            }
        }
        ul{
            height: 50px;
            display: flex;
            line-height: 50px;
            margin-left:40px;
            li{
                height: 50px;
                line-height: 50px;
                margin-right: 20px;
                a{
                    display:inline-block;
                    color: rgba(255,255,255,.5);
                    line-height: 60px;
                    font-size: 14px;
                }
                a:hover{
                    color: #ffc44f;
                }
            }
        }
    }
    .right{
        .exit{
            height: 30px;
            line-height:30px;
            font-size: 12px;
            color: rgba(255,255,255,.5);
            cursor: pointer;
            margin-top: 10px;
            i{
                font-size: 10px;
            }
        }
        .exit:hover{
            color: #ffc44f;
        }
    }


}

</style>